<template>
	<view>
		<custom fixed="fixed" background="#fff" mode="2" title="分红池">
		</custom>
		<view class="income-bg color-33333">
			<view class="fs-28 blod income-top flex flex-y-center">
				分红总金额(元)
				<view @click="logout" style="border: 1px solid #8285b6;width: 40rpx;height: 40rpx;color: #fff;line-height: 40rpx;margin-left: 20rpx;
				border-radius: 50%;background-color: #8285b6;text-align: center;">?</view>
			</view>
			<view class="flex flex-y-center income-bom">
				<view class="blod mt-10 mr-30" style="vertical-align:bottom;">
					<text class="fs-50">
						{{totalAmount}}
					</text>
				</view>
				<!-- <view @tap.stop="toPage('/pages/course/cashOut')" class="cashout-btn fs-26 blod">
					提现
				</view> -->
			</view>
		</view>
		<view class="bgmineicon"></view>
		<view class="flex flex-y-center flex-x-b" style="height: 100rpx;padding: 0 35rpx;">
			<view class="color-333333 fs-30 blod">分红池记录</view>
			<!-- <view style="width: 400rpx;">
				<rudon-multiSelector welcome="全部收益" :is_using_slot="false" :is_using_icon="true" :localdata="options"
					@change="change"></rudon-multiSelector>
			</view> -->
		</view>
		<view class="m-30" style="height: 1000rpx; padding: 0 35rpx; border-radius: 20rpx;background: #F7F7FC;
overflow-y: auto;">
			<!-- <view class="flex flex-y-center flex-x-b" style="height: 100rpx;border-bottom: 2rpx solid #E6E6E6;">
				<view class="color-333333 fs-30 blod">提现记录</view>
				<view style="width: 400rpx;">
					<rudon-multiSelector welcome="全部收益" :is_using_slot="false" :is_using_icon="true"
						:localdata="options" @change="change"></rudon-multiSelector>
				</view>
			</view> -->

			<view style="margin-top: 0rpx;">

				<view class="income-item flex flex-x-b flex-y-center" style="padding: 20rpx 0rpx;"
					v-for="(item,index) in list" :key="index">
					<view class="">
						<view class="fs-30 color-333333">
							系统新增{{ item.nickName }} {{ item.vipLevelName }}
						</view>
						<view class="fs-26 color-999999">
							{{ item.createTime }}
						</view>
					</view>
					<view class="fs-32" style="color: #333333;vertical-align:bottom;width: 140rpx;
height: 56rpx;text-align: center;line-height: 56rpx;
background: #FFFFFF;
border-radius: 100px 100px 100px 100px;">
						<text v-if="item.amount && item.amount > 0">+</text>
						<text>{{item.amount}}</text>
					</view>
				</view>
			</view>
			<qq-footer :list="list" :show="is_null"></qq-footer>
			<toastwo ref="toast"></toastwo>
		</view>

	</view>
</template>

<script>
	import api from './api/dividendpool'
	import {
		timestampToTime
	} from './utils'
	export default {
		data() {
			return {
				background: 'rgba(255,255,255,0)',
				list: [],
				totalAmount: 0,
				firstRequst: true,
				is_null: false,
				options: [],
				tab_index: 0,
				toasttxt: '1. 合伙人加权分红池，每月分红清零一次，当月分红日，所有合伙人获得加权分红',
				toasttxt2: '2.到期未续费用户，不享受对应权限，未续费，默认该用户为免费注册用户，续费后恢复其相关权限'
			};
		},
		onShow() {
			this.is_null = false;
			this.getInfo();
			this.getList();
		},
		onLoad() {
			this.getInfo();
			this.getList();
			uni.$emit('refresh_income', () => {
				this.is_null = false;
				this.getInfo();
				this.getList();
			});
			this.getOptions();
		},
		onUnload() {
			uni.$off('refresh_income');
		},
		methods: {
			logout() {
				this.$refs.toast.open({
					desc: this.toasttxt,
					toasttxt2: this.toasttxt2
				})
			},
			change(val) {
				let arr = val.filter(val => val.is_selected);
				if (arr.length == 1) {

					this.getList(arr[0].value);
				}
			},
			getOptions() {
				this.request({
					url: '/courseAccountDetails/getType',
				}).then(res => {
					if (res.status != 200) {
						return;
					}
					if (res.data) {
						let options = Object.keys(res.data).map(val => {
							return {
								value: val,
								text: res.data[val],
								is_selected: false,
							}
						});
						options.unshift({
							value: '',
							text: '全部',
							is_selected: true,
						});
						this.options = options;
					}

				});
			},
			tab_change(index) {
				this.tab_index = index;
				this.is_null = false;
				this.getList();
			},
			async getInfo() {
				const {
					data,
					status,
					msg
				} = await api.getAccountInfo({})
				if (!status == 200) return this.showTos(msg)
				if (data) {
					this.totalAmount = data.amount
				}
			},
			async getList(type = '') {
				const {
					data,
					status,
					msg
				} = await api.getAccounDetail({
					pageSize: 999,
					pageNumber: 1,

				})
				if (!status == 200) return this.showTos(msg)
				this.firstRequst = false
				if (data) {
					this.list = data.list.map(item => {
						item.typeValue = ['', '卖课收入', '提现支出', '提现失败返还', '直播收入'][item.type] || ''
						return item
					});
					this.is_null = true;
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.bgmineicon {
		position: fixed;
		top: 180rpx;
		right: 85rpx;
		width: 218rpx;
		height: 218rpx;
		background: url(../../static/my/dividendpool.png) center center no-repeat;
		background-size: 218rpx;
	}

	.income-bg {
		margin: 30rpx;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.16);
		border-radius: 20px;

		.income-top {
			background: #fff;
			height: 120rpx;
			padding: 0 30rpx;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
		}

		.income-bom {
			padding: 0 30rpx;
			margin-bottom: 10rpx;
			height: 120rpx;
			background: rgba(205, 186, 238, 0.09);
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;

		}
	}

	.color-222121 {
		color: #222121;
	}

	.color-9B9B9B {
		color: #9B9B9B;
	}

	.income-item+.income-item {
		// border-top: 0.5px solid rgba(0, 0, 0, 0.05);
	}

	.cashout-btn {
		color: #fff;
		width: 105rpx;
		height: 50rpx;
		border-radius: 25rpx;
		text-align: center;
		line-height: 50rpx;
		background: linear-gradient(132deg, #67B0F3 0%, #3045FD 100%);
		box-shadow: 0px 8px 20px 0px #89A6FF;
	}
</style>